<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			body{
				background-color: #000000;
			}
			span{
				width: 20px;
				height: 20px;
				background:url("image/star.png") no-repeat;
				animation: flash 1s alternate infinite;
				position: absolute;
				background-size: 100% 100%;
			}
			@keyframes flash {
			    0%{opacity: 0;}
			    100%{opacity: 1;}
			}
			span:hover{
				cursor: pointer;
				transform: scale(3,3) rotate(180deg) !important;
				transition: all 1s;
			}
		</style>
	</head>
	<body>
		
		<script>
			window.onload = function(){
				//获取长宽高
			var screenw = document.documentElement.clientWidth;
			var screenh = document.documentElement.clientHeight;
			//遍历生成星星
			for(var i=0; i<200; i++){
				var span = document.createElement('span');
				document.body.appendChild(span);
				//随机坐标
				var x = parseInt(Math.random() * screenw);
				 var y = parseInt(Math.random() * screenh);
				 span.style.left = x + 'px';
				 span.style.top = y + 'px';
				//随机缩放
				var scale = Math.random()*1.5;
				span.style.transform = 'scale('+scale+', '+scale+')';
				//频率
				var rate = Math.random()*1.5;
				span.style.animationDelay = rate + 's';
			}
         //获取随机的位置
		 
		  
		  
			}
		</script>
	</body>
</html>
